<template>
  <div class="us_box">
    <div
      style="margin-bottom: 45px"
      v-for="(item1, index1) in list"
      :key="index1"
    >
      <!-- options -->
      <div
        style="margin-bottom: 30px"
        v-for="(item2, index2) in item1.options"
        :key="index2"
      >
        <div class="bg_title">
          {{ item2.title }}
        </div>
        <div v-for="(item3, index3) in item2.options" :key="index3">
          <div class="text" v-if="item3.type == 'text'">
            {{ item3.text }}
          </div>
          <div v-if="item3.type == 'img'">
            <img
              style="width: 100px"
              :src="$filters.prefix(item3.text)"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "Us",
  components: {},
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },

  setup() {
    const state = reactive({ licensee: "", number: "" });

    return { ...toRefs(state) };
  },
});
</script>
<style lang="scss" scoped>
.us_box {
  .text {
    font-size: 14px;
    color: #666666;
  }
  .bg_title {
    font-size: 16px;
    color: #333333;
    font-weight: 600;
    margin-bottom: 6px;
  }
}
</style>
